<!-- Area -->
<template>
  <div>
    <van-nav-bar title="城市列表">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()"/>
      </template>
    </van-nav-bar>
    <van-index-bar>
      <van-index-anchor index="当前城市"
        >当前城市
        <van-cell>
          <cityLabel :label="label" />
        </van-cell>
      </van-index-anchor>
      <van-index-anchor index="#"
        >#
        <van-cell
          v-for="(item, index) in hotCityList"
          :key="index + 1000"
          @click="clickFn(item.label)"
        >
          <cityLabel :label="item.label" />
        </van-cell>
      </van-index-anchor>
      <van-index-anchor
        v-for="(str, index) in indexList2"
        :key="index"
        :index="str"
        >{{ str }}
        <van-cell
          v-for="(item, index) in cityList.filter(
            (item) => item.short.slice(0, 1).toUpperCase() === str
          )"
          :key="index"
          @click="clickFn(item.label)"
        >
          <cityLabel :label="item.label" />
        </van-cell>
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import cityLabel from '@/views/Area/components/cityLabel.vue'
import { areaListAPI, hotCityAPI, cityInfoAPI, areaHouseListAPI } from '@/api'
import { Toast } from 'vant'

export default {
  data () {
    return {
      indexList: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      indexList2: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      cityList: [],
      hotCityList: [],
      ciyiesList: [],
      label: localStorage.getItem('cityName') || '北京'
    }
  },
  components: {
    cityLabel
  },
  async created () {
    const res = await areaListAPI()
    // console.log(res)
    this.cityList = res.data.body
    const res2 = await hotCityAPI()
    // console.log(res2)
    this.hotCityList = res2.data.body
  },
  methods: {
    async clickFn (CityName) {
      // this.$router.back()
      const res = await cityInfoAPI({ name: CityName })
      // console.log(res)
      const value = res.data.body.value
      const res2 = await areaHouseListAPI({ id: value })
      // console.log(res2)
      this.ciyiesList = res2.data.body
      if (this.ciyiesList !== 0) {
        this.$router.back()
        localStorage.setItem('cityName', CityName)
      } else {
        Toast.fail('没有房源')
      }
    }
  }
}
</script>
<style lang='less' scoped>
// body {
//   background-color: aquamarine;
// }
</style>
